<script setup>
import CardBox from '@/components/CardBox/index.vue'
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import useUserStore from "@/store/modules/user.js";
import {deleteCertificateApi, deleteInternshipApi, getHonorListApi, getInternshipListApi} from "@/api/school.js";
import {formatDate, formatDateNoTime} from "../../../utils/index.js";

const userStore = useUserStore()
const router = useRouter()
const {proxy} = getCurrentInstance();


const tableData = [
  {
    a: '2024/03/10-2024/05/10',
    b: '江苏省南京市玄武区',
    c: '2020-09-01   13:21',
  },
  {
    a: '2024/03/10-2024/05/10',
    b: '江苏省南京市玄武区',
    c: '2020-09-01   13:21',
  },
  {
    a: '2024/03/10-2024/05/10',
    b: '江苏省南京市玄武区',
    c: '2020-09-01   13:21',
  },
  {
    a: '2024/03/10-2024/05/10',
    b: '江苏省南京市玄武区',
    c: '2020-09-01   13:21',
  },
]

const state = reactive({
  queryParams: {
    page: 1,
    limit: 10,
    shipTime: '',
    stuId: '',
  },
  tableData: [],
  total: 0,
})

const showDia1 = ref(false)

const handleResult = () => {
  router.push("/baseData/userPermissions/achievements")
}

const closeDia1 = () => {
  showDia1.value = false
}

const addForm = reactive({
  a: '',
  b: '',
})

const handleAdd = () => {
  const stuId = userStore.stuId
  router.push({
    path: '/employmentNavigation/internship/details',
    query: {
      stuId: stuId,
    }
  })
}

const getDataList = async () => {
  const res = await getInternshipListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  const stuId = userStore.stuId
  state.queryParams.stuId = stuId
  getDataList()
}

const handleEdit = (row) => {
  console.log(row,"row")
  const stuId = userStore.stuId

  router.push({
    path: '/employmentNavigation/internship/details',
    query: {
      stuId,
      id: row.id
    }
  })

}

const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteInternshipApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

onMounted(() => {
  const stuId = userStore.stuId
  state.queryParams.stuId = stuId

  getDataList()
})

</script>

<template>
  <div class="content">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="state.queryParams" label-width="auto" inline="true">
          <el-form-item label="实习时间">
            <el-date-picker
                v-model="state.queryParams.shipTime"
                type="date"
                value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="用户权限管理">
      <template #btn-cont>
        <!--        <el-button type="primary">-->
        <!--          <el-icon>-->
        <!--            <Download/>-->
        <!--          </el-icon>-->
        <!--          <span>导出</span>-->
        <!--        </el-button>-->
        <el-button type="primary" @click="handleAdd">上传经历</el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="180" align="center"/>
          <el-table-column prop="startTime" label="实习时间" align="center">
            <template #default="scope">
              {{ formatDateNoTime(scope.row.startTime) }} 至 {{ formatDateNoTime(scope.row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="shipAddress" label="地址" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template #default="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
          />
        </div>
      </template>
    </CardBox>


    <el-dialog
        v-model="showDia1"
        title="新增"
        width="400"
        align-center
        :before-close="closeDia1"
    >
      <el-form :model="addForm" label-width="auto" inline="true">
        <el-form-item label="名称：">
          <el-input v-model="addForm.a" style="width: 250px;"/>
        </el-form-item>
        <el-form-item label="角色权限：">
          <el-input v-model="addForm.b" style="width: 250px;"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDia1 = false">取消</el-button>
          <el-button type="primary" @click="showDia1 = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.content {
  padding: 20px;
}


</style>
